<template>
  <div id="treeTable">
    <el-card class="left" style="max-width: 250px; min-width: 250px">
      <TreeFilter
        label="name"
        title="部门列表(单选)"
        :requestApi="treeTableDataList"
        :defaultValue="initParam.departmentId"
        @change="changeTreeFilter"
      >
      </TreeFilter>
    </el-card>
    <div class="right">
      <div class="right-bottom">
        <ProTable :columns="columns" selection="index">
          <template #gender="scope">
            <el-tag :type="scope.row.gender === 2 ? 'success' : 'warning'" disable-transitions>
              {{ scope.row.gender === 1 ? '男' : '女' }}
            </el-tag>
          </template>
          <template #status="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" disable-transitions>
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
          <template #operation="scope">
            <el-button link :icon="View" type="primary" @click="openDrawer(scope.row)">查看</el-button>
            <el-button link :icon="EditPen" type="primary">编辑</el-button>
            <el-button link :icon="Refresh" type="primary">重置密码</el-button>
            <el-button link :icon="Delete" type="primary">删除</el-button>
          </template>
        </ProTable>
      </div>
      <el-card> 所有字段都是可以被搜索的 </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup name="treeTable">
// treeTable
//-----------------------------------------------------------------------------
import TreeFilter from '@/views/table/useTreeFilter/treeSearch.vue'
import { treeTableDataList } from '@/data/tableData/tableData'
import { ElMessage, ElMessageBox } from 'element-plus'
// 表头类型
import { ColumnProps } from '@/components/ProTable/interface/index'
// 性别数据
import { getUserGender } from '@/data/treeData/treeData'
// 表格
import ProTable from '@/components/ProTable/index.vue'
// 图标
import { Delete, EditPen, View, Refresh } from '@element-plus/icons-vue'
// 引入仓库
import useStore from '@/stores'
const { useTreeTable } = useStore()
//-----------------------------------------------------------------------------

// 树形结构-----------------------------------------------------------------------------
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = ref({
  departmentId: '1'
})
// 树形筛选切换
const changeTreeFilter = (val: string) => {
  ElMessage.success('请注意查看请求参数变化 🤔')
  initParam.value.departmentId = val
}
//-----------------------------------------------------------------------------
// 表格配置项
const columns: ColumnProps[] = [
  { prop: 'username', label: '用户姓名', search: { el: 'input' } },
  {
    prop: 'gender',
    label: '性别',
    sortable: true, //可排序的
    enum: getUserGender.value.data //性别词典
  },
  { prop: 'area', label: '区域' },
  { prop: 'department', label: '部门' },
  { prop: 'idCard', label: '身份证号' },
  { prop: 'email', label: '邮箱' },
  { prop: 'address', label: '居住地址' },
  {
    prop: 'status',
    label: '用户状态',
    sortable: true,
    tag: true
  },
  { prop: 'creationDate', label: '创建时间' }
]
// 表格数据
// 表格数据
const getData = async () => {
  useTreeTable.getTableDataList()
}
getData()

//-----------------------------------------------------------------------------

const openDrawer = (a: any) => {
  console.log(`a`, a)
}
</script>

<style lang="scss" scoped>
#treeTable {
  display: flex;
  justify-content: space-between;
  .right {
    min-width: 400px;
    margin-left: 10px;
    flex: 1;
  }
}
</style>
